<template>
  <div>
    <FosoCard :showheader="false" class="cleartable">
      <!-- 表格 -->
      <!-- <tablecom /> -->
      <FosoTable
        :columns="columns"
        :data="data"
        toolbarbutton-name="新增第三方"
      />
      <Dome />
    </FosoCard>
    <test />
  </div>
</template>

<script setup lang="tsx">
import type { columnsType } from './type';

import Dome from './dome.vue';
import test from './test.vue';

const columns = ref<columnsType[]>([
  { title: '序号', type: 'seq', width: 50 },
  { field: 'name', title: 'Name' },
  { field: 'age', sortable: true, title: 'Age' },
  { field: 'nickname', title: 'Nickname' },
  { field: 'role', title: 'Role' },
  { field: 'address', showOverflow: true, title: 'Address' },
]);

const data = ref([
  {
    id: 1,
    name: 'John Doe',
    age: 25,
    nickname: 'Johnny',
    role: 'Admin',
    address: '123 Main St, Springfield, USA',
  },
  {
    id: 2,
    name: 'Jane Smith',
    age: 30,
    nickname: 'Janey',
    role: 'User',
    address: '456 Elm St, Springfield, USA',
  },
]);
</script>
